﻿<phone:PhoneApplicationPage xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:ec="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
    x:Class="XMPPClient.MainPage"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True" mc:Ignorable="d" 
    Loaded="PhoneApplicationPage_Loaded" Unloaded="PhoneApplicationPage_Unloaded"
    d:DesignHeight="696" d:DesignWidth="480">

    <phone:PhoneApplicationPage.Resources>

        <LinearGradientBrush x:Key="FadeOutBrush" StartPoint="0.0,0.5" EndPoint="1.0,0.5">
            <GradientStop Color="{StaticResource PhoneAccentColor}" Offset="0"/>
            <GradientStop Color="#000000" Offset="1"/>
       </LinearGradientBrush>
        
        
        <Style x:Key="ButtonStyle1" TargetType="Button">
    		<Setter Property="BorderBrush" Value="{x:Null}"/>
    		<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
    		<Setter Property="BorderThickness" Value="0"/>
    		<Setter Property="Padding" Value="0,0,0,0"/>
    		<Setter Property="Template">
    			<Setter.Value>
    				<ControlTemplate TargetType="Button">
    					<Grid Background="{TemplateBinding Background}" >
    						<VisualStateManager.VisualStateGroups>
    							<VisualStateGroup x:Name="CommonStates">
    								<VisualState x:Name="Normal"/>
    								<VisualState x:Name="MouseOver"/>
    								<VisualState x:Name="Pressed">
    									<Storyboard>
    										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
    											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
    										</ObjectAnimationUsingKeyFrames>
    										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentContainer">
    											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
    										</ObjectAnimationUsingKeyFrames>
    										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentContainer">
    											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
    										</ObjectAnimationUsingKeyFrames>
    									</Storyboard>
    								</VisualState>
    								<VisualState x:Name="Disabled">
    									<Storyboard>
    										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
    											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
    										</ObjectAnimationUsingKeyFrames>
    										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentContainer">
    											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
    										</ObjectAnimationUsingKeyFrames>
    										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentContainer">
    											<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
    										</ObjectAnimationUsingKeyFrames>
    									</Storyboard>
    								</VisualState>
    							</VisualStateGroup>
    						</VisualStateManager.VisualStateGroups>
  							<ContentControl x:Name="ContentContainer" VerticalAlignment="Center" 
								Background="{TemplateBinding Background}" VerticalContentAlignment="Stretch" 
								ContentTemplate="{TemplateBinding ContentTemplate}" 
								Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" />
    					</Grid>
    				</ControlTemplate>
    			</Setter.Value>
    		</Setter>
    	</Style>
		
		
        <DataTemplate x:Key="ChatMessageTemplate2">
        	<Grid Background="{x:Null}" Margin="0,2">
        		<Grid.ColumnDefinitions>
        			<ColumnDefinition Width="80" />
        			<ColumnDefinition Width="400*" />
        			<ColumnDefinition Width="40" />
        			<ColumnDefinition Width="40" />
        		</Grid.ColumnDefinitions>

        		<Grid.RowDefinitions>
        			<RowDefinition Height="50" />
        			<RowDefinition Height="30" />
        		</Grid.RowDefinitions>

        		<Rectangle Stroke="{Binding Presence.PresenceBrush}" StrokeThickness="2" Fill="{x:Null}" Margin="4" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" />
        		<Image Grid.Column="0" Grid.Row="0" Margin="8" Source="{Binding Avatar}"  Grid.RowSpan="2"/>


                <Button Background="#44EEFFEE" Margin="4,0" Grid.Column="1" Grid.Row="0"  
        			x:Name="HyperlinkRosterItem" Click="HyperlinkRosterItem_Click" 
        			FontWeight="Bold"  BorderThickness="0" FontSize="18"  Content="{Binding Name}" Style="{StaticResource ButtonStyle1}" />

                

        		<Button BorderThickness="0" BorderBrush="{x:Null}" HorizontalAlignment="Stretch" 
        			ToolTipService.ToolTip="View New Messages" Grid.Row="0" Grid.Column="2"
        			x:Name="ButtonViewMessages" Click="ButtonViewMessages_Click"   
                    Style="{StaticResource ButtonStyle1}" 
        			Visibility="{Binding NewMessagesVisible}" >
                    <Grid>
                        <Ellipse Stroke="{StaticResource PhoneAccentBrush}" Fill="{StaticResource PhoneAccentBrush}" />
                        <Image  Source="Images/chat-hollow.png" />
                   </Grid>
                   
       			
        		</Button>

                <Button Background="#44EEFFEE" Visibility="Visible" Style="{StaticResource ButtonStyle1}" ToolTipService.ToolTip="Map" Grid.Row="0" Grid.Column="3" x:Name="ButtonMapFriend" Click="ButtonMapFriend_Click" >
        			<Image  Source="Images/globe.png" Margin="10" />
        		</Button>

        		<StackPanel Grid.Row="1" Grid.Column="1"  Margin="4,0" Grid.ColumnSpan="3" Orientation="Horizontal">
        			<TextBlock Text="{Binding Presence.Status}" FontSize="14" />
                    <TextBlock Margin="10,0" Text="{Binding GeoString}" FontSize="14" />
                    
        		</StackPanel>
        	</Grid>

        </DataTemplate>
        
        <ControlTemplate x:Key="PhoneDisabledTextBoxTemplate" TargetType="TextBox">
        	<ContentControl x:Name="ContentElement" BorderThickness="0" HorizontalContentAlignment="Stretch" Margin="{StaticResource PhoneTextBoxInnerMargin}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Stretch"/>
        </ControlTemplate>


        
        <Style x:Key="TextBoxStyle1" TargetType="TextBox">
        	<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
        	<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
        	<Setter Property="Background" Value="{StaticResource PhoneBackgroundBrush}"/>
        	<Setter Property="Foreground" Value="{StaticResource PhoneContrastBackgroundBrush}"/>
        	<Setter Property="BorderBrush" Value="{StaticResource PhoneTextBoxBrush}"/>
        	<Setter Property="SelectionBackground" Value="{StaticResource PhoneAccentBrush}"/>
        	<Setter Property="SelectionForeground" Value="{StaticResource PhoneTextBoxSelectionForegroundBrush}"/>
        	<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
        	<Setter Property="Padding" Value="2"/>
        	<Setter Property="Template">
        		<Setter.Value>
        			<ControlTemplate TargetType="TextBox">
        				<Grid Background="Transparent">
        					<VisualStateManager.VisualStateGroups>
        						<VisualStateGroup x:Name="CommonStates">
        							<VisualState x:Name="Normal"/>
        							<VisualState x:Name="MouseOver"/>
        							<VisualState x:Name="Disabled">
        								<Storyboard>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EnabledBorder">
        										<DiscreteObjectKeyFrame KeyTime="0">
        											<DiscreteObjectKeyFrame.Value>
        												<Visibility>Collapsed</Visibility>
        											</DiscreteObjectKeyFrame.Value>
        										</DiscreteObjectKeyFrame>
        									</ObjectAnimationUsingKeyFrames>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledOrReadonlyBorder">
        										<DiscreteObjectKeyFrame KeyTime="0">
        											<DiscreteObjectKeyFrame.Value>
        												<Visibility>Visible</Visibility>
        											</DiscreteObjectKeyFrame.Value>
        										</DiscreteObjectKeyFrame>
        									</ObjectAnimationUsingKeyFrames>
        								</Storyboard>
        							</VisualState>
        							<VisualState x:Name="ReadOnly">
        								<Storyboard>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EnabledBorder">
        										<DiscreteObjectKeyFrame KeyTime="0">
        											<DiscreteObjectKeyFrame.Value>
        												<Visibility>Collapsed</Visibility>
        											</DiscreteObjectKeyFrame.Value>
        										</DiscreteObjectKeyFrame>
        									</ObjectAnimationUsingKeyFrames>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledOrReadonlyBorder">
        										<DiscreteObjectKeyFrame KeyTime="0">
        											<DiscreteObjectKeyFrame.Value>
        												<Visibility>Visible</Visibility>
        											</DiscreteObjectKeyFrame.Value>
        										</DiscreteObjectKeyFrame>
        									</ObjectAnimationUsingKeyFrames>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DisabledOrReadonlyBorder">
        										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}"/>
        									</ObjectAnimationUsingKeyFrames>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="DisabledOrReadonlyBorder">
        										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}"/>
        									</ObjectAnimationUsingKeyFrames>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DisabledOrReadonlyContent">
        										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxReadOnlyBrush}"/>
        									</ObjectAnimationUsingKeyFrames>
        								</Storyboard>
        							</VisualState>
        						</VisualStateGroup>
        						<VisualStateGroup x:Name="FocusStates">
        							<VisualState x:Name="Focused">
        								<Storyboard>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="EnabledBorder">
        										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBackgroundBrush}"/>
        									</ObjectAnimationUsingKeyFrames>
        									<!-- <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="EnabledBorder">
        										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBorderBrush}"/>
        									</ObjectAnimationUsingKeyFrames>-->
        								</Storyboard>
        							</VisualState>
        							<VisualState x:Name="Unfocused"/>
        						</VisualStateGroup>
        					</VisualStateManager.VisualStateGroups>
        					<Border x:Name="EnabledBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="0,0,0,0">
        						<ContentControl x:Name="ContentElement" BorderThickness="0" HorizontalContentAlignment="Stretch" Margin="{StaticResource PhoneTextBoxInnerMargin}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Center" />
        					</Border>
        					<Border x:Name="DisabledOrReadonlyBorder" BorderBrush="{StaticResource PhoneDisabledBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" Margin="{StaticResource PhoneTouchTargetOverhang}" Visibility="Collapsed">
        						<TextBox x:Name="DisabledOrReadonlyContent" Background="Transparent" Foreground="{StaticResource PhoneDisabledBrush}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" IsReadOnly="True" SelectionForeground="{TemplateBinding SelectionForeground}" SelectionBackground="{TemplateBinding SelectionBackground}" TextAlignment="{TemplateBinding TextAlignment}" TextWrapping="{TemplateBinding TextWrapping}" Text="{TemplateBinding Text}" Template="{StaticResource PhoneDisabledTextBoxTemplate}"/>
        					</Border>
        				</Grid>
        			</ControlTemplate>
        		</Setter.Value>
        	</Setter>
            
        </Style>
    </phone:PhoneApplicationPage.Resources>
        
    
	<phone:PhoneApplicationPage.FontFamily>
		<StaticResource ResourceKey="PhoneFontFamilyNormal"/>
	</phone:PhoneApplicationPage.FontFamily>
	<phone:PhoneApplicationPage.FontSize>
		<StaticResource ResourceKey="PhoneFontSizeNormal"/>
	</phone:PhoneApplicationPage.FontSize>
	<phone:PhoneApplicationPage.Foreground>
		<StaticResource ResourceKey="PhoneForegroundBrush"/>
	</phone:PhoneApplicationPage.Foreground>
 
    <!--Sample code showing usage of ApplicationBar-->
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IsEnabled="True" IconUri="Images/connect.png" Text="Connect" x:Name="ButtonConnect" Click="ButtonConnect_Click"/>
            <shell:ApplicationBarIconButton IsEnabled="True" IconUri="Images/tools.png" Text="Options" x:Name="ButtonOptions" Click="ButtonOptions_Click"/>
            <shell:ApplicationBarIconButton IsEnabled="True" IconUri="Images/file.png" Text="Transfers" x:Name="ButtonFileTransfers" Click="ButtonFileTransfers_Click"/>
        </shell:ApplicationBar> 
    </phone:PhoneApplicationPage.ApplicationBar>
        
    
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="261*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="50" />
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->

        <toolkit:PerformanceProgressBar
            VerticalAlignment="Top" Grid.ColumnSpan="3"
            x:Name="_performanceProgressBar"/>

        <Rectangle Visibility="Collapsed" x:Name="RectanglePresence" StrokeThickness="2" Width="96" Height="96" Stroke="{Binding PresenceStatus.PresenceBrush}" Fill="{x:Null}" Grid.RowSpan="2" Margin="2" />
        <Image Width="90" Height="90" Source="{Binding Avatar}" Grid.RowSpan="2" x:Name="ImageAvatar" Margin="5" >
            <toolkit:ContextMenuService.ContextMenu>
                <toolkit:ContextMenu>
                    <!-- You can suppress tilt on indivudal menu items with TiltEffect.SuppressTilt="True" -->
                    <toolkit:MenuItem x:Name="MenuItemOnline" Header="Online" Click="MenuItemOnline_Click" />
                    <toolkit:MenuItem x:Name="MenuItemBusy" Header="Busy"  Click="MenuItemBusy_Click" />
                    <toolkit:MenuItem x:Name="MenuItemDND" Header="DND" Click="MenuItemDND_Click"/>
                    <toolkit:MenuItem x:Name="MenuItemAway" Header="Away" Click="MenuItemAway_Click"/>
                </toolkit:ContextMenu>
            </toolkit:ContextMenuService.ContextMenu>
        </Image>

        <StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="0">
            <TextBlock Text="{Binding XMPPAccount.AccountName}" FontWeight="Bold"  Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0" VerticalAlignment="Center" />
            <TextBlock x:Name="ApplicationTitle" Text="{Binding XMPPState}" VerticalAlignment="Center" Margin="12,0" Style="{StaticResource PhoneTextNormalStyle}" />
        </StackPanel>
        <StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="1">
            <TextBox Visibility="Collapsed" Text="{Binding PresenceStatus.Status,Mode=TwoWay}" GotFocus="TextBoxStatus_GotFocus" LostFocus="TextBoxStatus_LostFocus" x:Name="TextBoxStatus" Margin="20,0" Padding="0" BorderThickness="0" FontSize="18.667" Style="{StaticResource TextBoxStyle1}" />
            <TextBox Text="{Binding GeoLocationString}" x:Name="TextBoxGeo" Margin="20,0" Padding="0" BorderThickness="0" FontSize="18.667" Style="{StaticResource TextBoxStyle1}" />
        </StackPanel>



        <toolkit:LongListSelector x:Name="ListBoxRoster" 
                                          Grid.Row="3" Grid.ColumnSpan="3"
                                          ItemsSource="{Binding RosterItems}" 
                                          ItemTemplate="{StaticResource ChatMessageTemplate2}" >
            <toolkit:LongListSelector.GroupItemsPanel>
                <ItemsPanelTemplate>
                    <toolkit:WrapPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </toolkit:LongListSelector.GroupItemsPanel>
            
            

            <toolkit:LongListSelector.GroupItemTemplate>
                <DataTemplate>
                    <!--<Border Background="{StaticResource PhoneAccentBrush}" Margin="{StaticResource PhoneTouchTargetOverhang}" Padding="{StaticResource PhoneTouchTargetOverhang}">
                        <TextBlock Text="{Binding Key}" Style="{StaticResource PhoneTextLargeStyle}"/>
                    </Border>-->
                        <StackPanel>
                            <TextBlock Text="{Binding Key}" Style="{StaticResource PhoneTextLargeStyle}"/>
                            <Rectangle Height="1" Stroke="{StaticResource FadeOutBrush}" StrokeThickness="1" Fill="{StaticResource FadeOutBrush}" Margin="0,0,10,2" />
                        </StackPanel>
                       
                    </DataTemplate>
            </toolkit:LongListSelector.GroupItemTemplate>

            <toolkit:LongListSelector.GroupHeaderTemplate>
                <DataTemplate >
                        <StackPanel d:DesignWidth="234" d:DesignHeight="62" Background="Black">
                            <TextBlock Text="{Binding Key}" Style="{StaticResource PhoneTextLargeStyle}"/>
                            <Rectangle Height="1" Stroke="{StaticResource FadeOutBrush}" StrokeThickness="1" Fill="{StaticResource FadeOutBrush}" Margin="0,0,10,2" />
                        </StackPanel>
                    </DataTemplate>
            </toolkit:LongListSelector.GroupHeaderTemplate>

        </toolkit:LongListSelector>

    </Grid>

</phone:PhoneApplicationPage>